<template>
  <div>
    <el-form ref="form" :model="q" label-width="110px" @submit.native.prevent>
      <el-card>
        <el-row style="padding-right: 2%">
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item label="商务微信">
              <el-input size="small" v-model="q.queryBusinessWeixin" clearable @change="queryData()" placeholder="-请输入商务微信-"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-button icon="el-icon-plus" size="mini" v-if="isAuth('sysConfig:save')" type="primary" @click="editHandle()">新增</el-button>
          <el-button icon="el-icon-delete" size="mini" v-if="isAuth('sysConfig:delete')" type="danger" @click="deleteData('/sysConfig/delete')" :disabled="dataSelect.length <= 0">删除</el-button>
          <span style="float:right;">
            <el-button icon="el-icon-search" size="mini" @click="queryData()">查询</el-button>
          </span>
        </el-row>
      </el-card>
    </el-form>

    <el-table :data="dataList" ref="dataTable" border v-loading="dataLoading" style="width: 100%;"
              @sort-change="(val) => orderSort(val)" @selection-change="(val) => selectionChange(val)">
      <el-table-column type="selection" width="40"/>
      <el-table-column label="序号" width="50" header-align="center" align="center">
        <template slot-scope="scope">{{(q.page - 1) * q.limit + scope.$index + 1}}</template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="150" prop="tel" label="客服电话"/>
      <el-table-column align="center" show-overflow-tooltip min-width="150" prop="loginTitle" label="登录页标题"/>
      <el-table-column align="center" show-overflow-tooltip min-width="150" prop="loginSubTitle" label="登录页副标题"/>
      <el-table-column align="center" prop="loginPic" label="登录页背景图" min-width="100">
        <template slot-scope="scope" v-if="scope.row.loginPic">
          <el-image class="etc-image" :preview-src-list="scope.row.loginPic.split(',')" :src="scope.row.loginPic.split(',')[0]" lazy />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button v-if="isAuth('sysConfig:update')" type="text" size="small" @click="editHandle(scope.row.id)">修改</el-button>
          <el-button v-if="isAuth('sysConfig:delete')" type="text" size="small" @click="deleteData('/sysConfig/delete', scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="(val) => sizeChange(val)" @current-change="(val) => currentChange(val)"
      :current-page="q.page" :page-sizes="[10, 20, 30, 50, 100, 300, 500]" :page-size="q.limit"
      layout="total, sizes, prev, pager, next, jumper" :total="q.totalCount">
    </el-pagination>

    <edit v-if="editVisible" ref="edit" @refreshDataList="reloadData()"/>
  </div>
</template>

<script>
  import Edit from './sysConfigEdit'
  export default {
    data () {
      return {
        q: this.getPage(),
        url: '/sysConfig/list',
        dataList: [],
        dataLoading: false,
        dataSelect: [],
        editVisible: false
      }
    },
    components: {
      Edit
    },
    activated () {
      this.getTableData(this.url, this.q)
    },
    methods: {
    }
  }
</script>
